import React, { Component } from 'react'
import { Router, Route, Switch } from 'react-router-dom'
// 导入封装的鉴权路由组件
import AuthRoute from 'components/AuthRoute'
import history from 'utils/history'
import Loading from 'components/Loading'
// 不用路由是否匹配，import 语句会把文件加到打包中
// import Test from 'pages/Test'
// import Layout from './pages/Layout'
// import Login from './pages/Login'

// 懒加载函数，可以配合路由实现性能优化
const Layout = React.lazy(() => import('./pages/Layout'))
const Login = React.lazy(() => import('./pages/Login'))
const Test = React.lazy(() => import('./pages/Test'))

// <HashRouter>    =  <Router> + createHashHistory()
// <BrowserRouter> =  <Router> + createBrowserHistory()
export default class App extends Component {
  render() {
    return (
      <Router history={history}>
        <React.Suspense fallback={<Loading />}>
          <Switch>
            <Route path='/test' component={Test} />
            {/* 按书写顺序从上往下匹配，需先匹配登录页 */}
            <Route path='/login' component={Login} />
            {/* 嵌套路由的父路由不能写精确匹配 */}
            {/* <Route path='/' component={Layout} /> */}
            {/* Route 组件进阶写法： render 函数渲染组件写法  */}
            {/* 导入鉴权路由组件 - 封装成组件以后项目都可复用 */}
            <AuthRoute path='/' component={Layout} />
          </Switch>
        </React.Suspense>
      </Router>
    )
  }
}
